<template>
<div v-if="dto">
  <div class="content">
    <div class="title">雲鼎峰商城发货单</div>
    <div class="params">
      <div>订单编号：{{dto.id}}</div>
      <div>下单时间：{{dto.created_at | parseTime('{y}年{m}月{d}日')}}</div>
    </div>
    <div class="params">
      <div>客户：{{dto.shipping.consignee}}</div>
      <div>订单总额：{{dto.amount}}</div>
    </div>
    <div class="params">
      <div>收货地址：{{dto.shipping.district + dto.shipping.address + '， ' + dto.shipping.mobile}}</div>
      <div></div>
    </div>
    <div class="params" v-if="dto.remark">
      <div>备注：{{dto.remark}}</div>
      <div></div>
    </div>
    <table class="gridtable">
      <tr>
        <th>序号</th><th>货号</th><th>品名</th><th>规格</th><th>数量</th><th>单价</th><th>小计</th>
      </tr>
      <tr v-for="(item,index) in list" :key="item.id">
        <td>{{index + 1}}</td>
        <td>{{item.sku_no}}</td>
        <td>{{item.product_name}}</td>
        <td>{{item.product_item_name}}</td>
        <td>{{item.quantity}}</td>
        <td>{{item.price}}</td>
        <td>{{item.subtotal}}</td>
      </tr>
    </table>
  </div>

  <div class="btn">
    <el-button type="primary" @click="print">打印</el-button>
  </div>

</div>

</template>

<script>
import { getOrderById,getOrderItemsById } from '@/api/order'

export default {
  data() {
    return {
      dto: null,
      list: null,
      listLoading: false,
      date_value:[
        '2020-08-29',
        '2020-08-31'
      ]
    }
  },
  created() {
    let id = this.$route.params.id
    this.getOrder(id)

  },
  methods: {
    getOrder:async function(id){
      let res = await getOrderById(id)
      this.dto = res.order
      let res_items = await getOrderItemsById(id)
      this.list = res_items
    },
    print(){
      window.print()
    }
  }
}
</script>

<style>
  @media print {
    @page {
      margin: 0cm;
    }
    body {
      margin: 0cm;
    }
    .btn{
      visibility: hidden;
      display: none;
    }
  }

  .btn{
    margin-top:20px;
    width: 694px;
    margin-left:30px;
    display: flex;
    justify-content: center;
  }

  .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 694px;
    margin-left:30px;
    font-size:20px !important;
    font-family: SimHei;
    color:#000000;
  }

  .content .title{
    display: flex;
    justify-content: center;
    padding-top:20px;
    padding-bottom:20px;
  }

  .content .params{
    font-size:14px;
    display: flex;
    justify-content: space-between;
    margin-bottom:10px;
  }

  .item-line{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border:1px solid white;
    margin-bottom:5px;
  }

  table.gridtable {
    font-size:11px;
    color:#000000;
    border-width: 1px;
    border-color: #000000;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #000000;
    background-color: #dedede;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #000000;
    background-color: #ffffff;
  }

  .name_item{
    margin-right:10px;
  }

</style>
